/**
* 通用css样式布局处理
* Copyright (c) 2019 ruoyi
*/

/** 基础通用 **/
.pt5 {
  padding-top: 5px;
}

.pr5 {
  padding-right: 5px;
}

.pb5 {
  padding-bottom: 5px;
}

.mt5 {
  margin-top: 5px;
}

.mr5 {
  margin-right: 5px;
}

.mb5 {
  margin-bottom: 5px;
}

.mb8 {
  margin-bottom: 8px;
}

.ml5 {
  margin-left: 5px;
}

.mt10 {
  margin-top: 10px;
}

.mr10 {
  margin-right: 10px;
}

.mb10 {
  margin-bottom: 10px;
}

.ml10 {
  margin-left: 10px;
}

.mt20 {
  margin-top: 20px;
}

.mr20 {
  margin-right: 20px;
}

.mb20 {
  margin-bottom: 20px;
}

.ml20 {
  margin-left: 20px;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}

.el-message-box__status + .el-message-box__message {
  word-break: break-word;
}

.el-dialog:not(.is-fullscreen) {
  margin-top: 6vh;
}

.el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body {
  overflow: auto;
  overflow-x: hidden;
  max-height: 70vh;
  padding: 10px 20px 0;
}

.el-table {
  .el-table__header-wrapper,
  .el-table__fixed-header-wrapper {
    th {
      word-break: break-word;
      background-color: #f8f8f9;
      color: #515a6e;
      height: 40px;
      font-size: 13px;
    }
  }

  .el-table__body-wrapper {
    .el-button [class*="el-icon-"] + span {
      margin-left: 1px;
    }
  }
}

/** 表单布局 **/
.form-header {
  font-size: 15px;
  color: #6379bb;
  border-bottom: 1px solid #ddd;
  margin: 8px 10px 25px 10px;
  padding-bottom: 5px;
}

/** 表格布局 **/
.pagination-container {
  position: relative;
  height: 25px;
  margin-bottom: 10px;
  margin-top: 15px;
  padding: 10px 20px !important;
}

/* tree border */
.tree-border {
  margin-top: 5px;
  border: 1px solid #e5e6e7;
  background: #ffffff none;
  border-radius: 4px;
}

.pagination-container .el-pagination {
  right: 0;
  position: absolute;
}

@media (max-width: 768px) {
  .pagination-container .el-pagination > .el-pagination__jump {
    display: none !important;
  }

  .pagination-container .el-pagination > .el-pagination__sizes {
    display: none !important;
  }
}

.el-table .fixed-width .el-button--mini {
  padding-left: 0;
  padding-right: 0;
  width: inherit;
}

/** 表格更多操作下拉样式 */
.el-table .el-dropdown-link,
.el-table .el-dropdown-selfdefine {
  cursor: pointer;
  margin-left: 5px;
}

.el-table .el-dropdown,
.el-icon-arrow-down {
  font-size: 12px;
}

.el-tree-node__content > .el-checkbox {
  margin-right: 8px;
}

.list-group-striped > .list-group-item {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

.list-group {
  padding-left: 0px;
  list-style: none;
}

.list-group-item {
  border-bottom: 1px solid #e7eaec;
  border-top: 1px solid #e7eaec;
  margin-bottom: -1px;
  padding: 11px 0px;
  font-size: 13px;
}

.pull-right {
  float: right !important;
}

.el-card__header {
  padding: 14px 15px 7px;
  min-height: 40px;
}

.el-card__body {
  padding: 15px 20px 20px 20px;
}

.card-box {
  padding-right: 15px;
  padding-left: 15px;
  margin-bottom: 10px;
}

/* button color */
.el-button--cyan.is-active,
.el-button--cyan:active {
  background: #20b2aa;
  border-color: #20b2aa;
  color: #ffffff;
}

.el-button--cyan:focus,
.el-button--cyan:hover {
  background: #48d1cc;
  border-color: #48d1cc;
  color: #ffffff;
}

.el-button--cyan {
  background-color: #20b2aa;
  border-color: #20b2aa;
  color: #ffffff;
}

/* text color */
.text-navy {
  color: #1ab394;
}

.text-primary {
  color: inherit;
}

.text-success {
  color: #1c84c6;
}

.text-info {
  color: #23c6c8;
}

.text-warning {
  color: #f8ac59;
}

.text-danger {
  color: #ed5565;
}

.text-muted {
  color: #888888;
}

/* image */
.img-circle {
  border-radius: 50%;
}

.img-lg {
  width: 120px;
  height: 120px;
}

.avatar-upload-preview {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-shadow: 0 0 4px #ccc;
  overflow: hidden;
}

/* 拖拽列样式 */
.sortable-ghost {
  opacity: 0.8;
  color: #fff !important;
  background: #42b983 !important;
}

.top-left {
  position: relative;
  float: left;
}

.top-right-btn {
  position: relative;
  float: right;
}

.small-line-height {
  line-height: 32px;
}

//refine vue-multiselect plugin
.multiselect {
  line-height: 16px;
}

.multiselect--active {
  z-index: 1000 !important;
}

.el-switch__label {
  color: #30313355;
}

.text-bold {
  font-weight: 600;
}

.text-major {
  color: rgba(0, 0, 0, 0.88);
}
.text-minor {
  color: rgba(0, 0, 0, 0.56);
}
.text-assist {
  color: rgba(0, 0, 0, 0.32);
}
.text-md {
  font-size: 16px;
}
.text-sm {
  font-size: 14px;
}
.text-mini {
  font-size: 12px;
}
.text-bold {
  font-weight: 600;
}
.text-sm-line {
  line-height: 28px;
}

.cd-text-xxxlg {
  font-size: 32px !important;
}
.cd-text-xxlg {
  font-size: 24px !important;
}
.cd-text-xlg {
  font-size: 18px !important;
}
.cd-text-lg {
  font-size: 16px !important;
}
.cd-text-md {
  font-size: 14px !important;
}
.cd-text-sm {
  font-size: 12px !important;
}
.cd-mb4 {
  margin-bottom: 4px;
}
.cd-mb8 {
  margin-bottom: 8px;
}
.cd-mb16 {
  margin-bottom: 16px;
}
.cd-mb24 {
  margin-bottom: 24px;
}
.cd-mb32 {
  margin-bottom: 32px;
}
.cd-mb50 {
  margin-bottom: 50px;
}
.cd-mt4 {
  margin-top: 4px;
}
.cd-mt8 {
  margin-top: 8px;
}
.cd-mt16 {
  margin-top: 16px;
}
.cd-mt24 {
  margin-top: 24px;
}
.cd-mt32 {
  margin-top: 32px;
}
.cd-mt50 {
  margin-top: 50px;
}
.cd-mt100 {
  margin-top: 100px;
}
.cd-mt150 {
  margin-top: 150px;
}
.cd-ml8 {
  margin-left: 8px;
}
.cd-ml16 {
  margin-left: 16px;
}
.cd-ml23 {
  margin-left: 23px;
}
.cd-ml24 {
  margin-left: 24px;
}
.cd-ml32 {
  margin-left: 32px;
}
.cd-ml50 {
  margin-left: 50px;
}
.cd-mr4 {
  margin-right: 4px;
}
.cd-mr8 {
  margin-right: 8px;
}
.cd-mr16 {
  margin-right: 16px;
}
.cd-mr24 {
  margin-right: 24px;
}
.cd-mr32 {
  margin-right: 32px;
}
.cd-mr50 {
  margin-right: 50px;
}
.cd-p4 {
  padding: 4px;
}
.cd-pt4 {
  padding-top: 4px;
}
.cd-pt8 {
  padding-top: 8px;
}
.cd-pb4 {
  padding-bottom: 8px;
}
.cd-pb8 {
  padding-bottom: 8px;
}
.cd-p8 {
  padding: 8px;
}
.cd-pr8 {
  padding-right: 8px;
}
.cd-pl8 {
  padding-left: 8px;
}

.cd-pt16 {
  padding-top: 16px;
}
.cd-pb16 {
  padding-bottom: 16px;
}
.cd-p16 {
  padding: 16px;
}
.cd-pr16 {
  padding-right: 16px;
}
.cd-pl16 {
  padding-left: 16px;
}

.cd-pt24 {
  padding-top: 24px;
}
.cd-pb24 {
  padding-bottom: 24px;
}
.cd-p24 {
  padding: 24px;
}
.cd-pr24 {
  padding-right: 24px;
}
.cd-pl24 {
  padding-left: 24px;
}

.cd-pt32 {
  padding-top: 32px;
}
.cd-pb32 {
  padding-bottom: 32px;
}
.cd-p32 {
  padding: 32px;
}
.cd-pr32 {
  padding-right: 32px;
}
.cd-pl32 {
  padding-left: 32px;
}

.hide {
  display: none !important;
}

.cursor-pointer {
  cursor: pointer;
}
.green {
  color: #14af13;
}
.red {
  color: #f40;
}
.theme-color {
  color: #1890ff;
}

.u-line-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.u-line-2 {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical !important;
}
.u-line-3 {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical !important;
}

.el-dialog__header {
  border-bottom: 1px solid #f5f5f5;
}

.bg-red {
  background: #e54d42;
  color: #fff;
}
.bg-red.light {
  background: #fadbd9;
  color: #e54d42;
}
.bg-orange {
  background: #f37b1d;
  color: #fff;
}
.bg-orange.light {
  background: #fde6d2;
  color: #f37b1d;
}
.bg-yellow {
  background: #fbbd08;
  color: #fff;
}
.bg-yellow.light {
  background: rgba(254, 242, 206, 0.82);
  color: #fbbd08;
}
.bg-olive {
  background: #8dc63f;
  color: #fff;
}
.bg-olive.light {
  background: #e8f4d9;
  color: #8dc63f;
}
.bg-green {
  background: #39b54a;
  color: #fff;
}
.bg-green.light {
  background: #d7f0db;
  color: #39b54a;
}
.bg-cyan {
  background: #1cbbb4;
  color: #fff;
}
.bg-cyan.light {
  background: #d2f1f0;
  color: #1cbbb4;
}
.bg-blue {
  background: #0081ff;
  color: #fff;
}
.bg-blue.light {
  background: #cce6ff;
  color: #0081ff;
}
.bg-purple {
  background: #6739b6;
  color: #fff;
}
.bg-purple.light {
  background: #e1d7f0;
  color: #6739b6;
}
.bg-mauve {
  background: #9c26b0;
  color: #fff;
}
.bg-mauve.light {
  background: #ebd4ef;
  color: #9c26b0;
}
.bg-pink {
  background: #e03997;
  color: #fff;
}
.bg-pink.light {
  background: #f9d7ea;
  color: #e03997;
}
.bg-brown {
  background: #a5673f;
  color: #fff;
}
.bg-brown.light {
  background: #ede1d9;
  color: #a5673f;
}
.bg-grey {
  background: #8799a3;
  color: #fff;
}
.bg-grey.light {
  background: #e7ebed;
  color: #8799a3;
}

.bg-gradual-red {
  background: linear-gradient(45deg, #f43f3b, #ec008c);
  color: #fff;
}
.bg-gradual-orange {
  background: linear-gradient(45deg, #ff9700, #ed1c24);
  color: #fff;
}
.bg-gradual-green {
  background: linear-gradient(45deg, #39b54a, #8dc63f);
  color: #fff;
}
.bg-gradual-blue {
  background: linear-gradient(45deg, #0081ff, #1cbbb4);
  color: #fff;
}
.bg-gradual-purple {
  background: linear-gradient(45deg, #9000ff, #5e00ff);
  color: #fff;
}
.bg-gradual-pink {
  background: linear-gradient(45deg, #ec008c, #6739b6);
  color: #fff;
}

/* 去除自带的增减按钮 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
.flex {
  display: flex;
}

.basis-xs {
  flex-basis: 20%;
}
.basis-xs25 {
  flex-basis: 25%;
}
.basis-sm32 {
  flex-basis: 32%;
}
.basis-sm {
  flex-basis: 40%;
}
.basis-sm49 {
  flex-basis: 49%;
}
.basis-df {
  flex-basis: 50%;
}

.basis-lg {
  flex-basis: 60%;
}
.basis-sm67 {
  flex-basis: 67%;
}
.basis-xl {
  flex-basis: 80%;
}

.basis-all {
  flex-basis: 100%;
}

.flex-sub {
  flex: 1;
}

.flex-twice {
  flex: 2;
}

.flex-treble {
  flex: 3;
}

.flex-direction {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.align-center {
  align-items: center;
}

.align-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-center {
  align-self: flex-center;
}

.self-end {
  align-self: flex-end;
}

.self-stretch {
  align-self: stretch;
}

.align-stretch {
  align-items: stretch;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}
// 文字加下划线
.underline {
  text-decoration: underline;
}
.border-bottom {
  border-bottom: 1px solid #333333;
}
.border-bottom-green {
  border-bottom: 1px solid #39b54a;
}
.text-gray,
.line-gray,
.lines-gray {
  color: #cccccc;
}
.text-black0,
.line-black0,
.lines-black0 {
  color: #000000;
}
.text-black,
.line-black,
.lines-black {
  color: #333333;
}
.text-black6,
.line-black6,
.lines-black6 {
  color: #666666;
}
.text-black9,
.line-black9,
.lines-black9 {
  color: #999999;
}
.text-white,
.line-white,
.lines-white {
  color: #ffffff;
}
// 自定义下拉
.customize-select {
  display: flex;
  align-items: center;
  justify-content: space-between;

  :first-child {
  }

  :last-child {
    color: #8492a6;
    font-size: 13px;
  }
}
.inline-block {
  display: inline-block;
}
.app-container-table-border,
.app-container-tree-border {
  border-radius: 4px;
  border: 1px solid #e6ebf5;
  background-color: #ffffff;
  overflow: hidden;
  color: #303133;
  padding: 10px;
  height: calc(100vh - 105px);
  width: 100%;
}
.app-container-table-border {
  overflow: auto;
}
.dialog-table-border {
  border-radius: 4px;
  border: 1px solid #e6ebf5;
  background-color: #ffffff;
  overflow: hidden;
  color: #303133;
  padding: 10px;
  min-height: 67vh;
  width: 100%;
}
